import Top from "../home/component/top";
import MyFooter from "../home/component/myFooter";
import {Layout, Card, Typography, Row, Col, Button} from "antd";
import {useLocation} from "react-router-dom";
import React, { useEffect, useState } from 'react';
import axios from "axios";
import OnlineBuy from "../buy/OnlineBuy";
import OfflineBuy from "../buy/OfflineBuy";

const {  Content } = Layout;
const { Title, Paragraph } = Typography;
const Detail = () => {
    let location = useLocation();
    // 访问查询字符串参数
    let searchParams = new URLSearchParams(location.search);
    let id = searchParams.get('id');
    let [stockInfo, setStockInfo] = useState({});
    const getInfo =  async () => {
        try {
            const response = await axios.get('http://localhost:8084/stock/'+id,
            );
            setStockInfo(response.data.data);
        } catch (error) {
            console.error(error);
        }
    }
    useEffect(()=>{
        getInfo();
    },[]);
    function formatDate(timestamp) {
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');

        return `${year}-${month}-${day}`;
    }

    const [Way,setWay] = useState(0);


    function onlineWay() {
        setWay(1)
    }

    function offlineWay() {
        setWay(2)
    }

    function goback() {
        setWay(0)
    }

    return(
    <>
        <Layout className="layout">
            <Top></Top>
            <Content style={{ padding: '0 100px' , marginTop : '20px'}}>
                <Row>
                    <Col span="0" ></Col>
                    <Card title={stockInfo.stockName} style={{ width: 300 , height : 400 }}>
                        <img src={`./profile/${stockInfo.picturePath}`} alt="Stock" style={{ width: '100%', height: 'auto' }} />
                        <strong>{stockInfo.stockDetail}</strong>
                    </Card>
                    <Col span='9'offset="1">  <div>
                        <Card title="详情" style={{ width: 400  , height : 400}}>
                            <table className="layui-table" lay-skin="line">
                                <colgroup>
                                    <col width="200"/>
                                    <col width="200"/>
                                    <col width="200"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>价格</th>
                                    <th>库存数量</th>
                                    <th>保质期</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>{stockInfo.stockPrice ? stockInfo.stockPrice.toFixed(2) : ''}元/斤</td>
                                    <td>{stockInfo.stockSum}斤</td>
                                    <td>{((stockInfo.stockLivingTime)-(stockInfo.stockLivingTime)%24)/24}天{(stockInfo.stockLivingTime)%24}小时</td>
                                </tr>
                                </tbody>
                            </table>
                            <Paragraph>产地: {stockInfo.stockBirthPlace}</Paragraph>
                            <Paragraph>生产日期: {formatDate(stockInfo.stockBirthday)}</Paragraph>

                        </Card>
                    </div></Col>
                    <Col span='6'>
                        {Way === 0 ? (
                        <Card title="购买方式" style={{ width: 300  , height : 400}}>
                            <Paragraph>销售地点: {stockInfo.stockSellPlace}</Paragraph>
                            <Paragraph>联系方式: {stockInfo.stockMaster}</Paragraph>
                            <Button onClick={onlineWay} type="primary" danger>
                                线上网购
                            </Button>
                            <div style={{height:10}}/>
                            <Button onClick={offlineWay} type="primary">线下购买</Button>
                        </Card>
                        ) :
                            Way === 1 ?(
                                <>
                                <Card title="线上购买" style={{ width: 450  , height : 400}}>
                                    <OnlineBuy stock={stockInfo}/>
                                    <Button onClick={goback} type="primary" danger style={{top:-56,left:80}}>上一步</Button>
                                </Card>
                                </>
                        ) : (
                                <>   <Card title="线下预购" style={{ width: 450  , height : 400}}>
                                    <OfflineBuy stock={stockInfo}/>
                                    <Button onClick={goback} type="primary" danger style={{top:-56,left:80}}>上一步</Button>
                                </Card></>
                            )}
                    </Col>
                </Row>

            </Content>
            <MyFooter></MyFooter>
        </Layout>
    </>
)
}
export default Detail;